<html>
    <head>
        <meta charset="utf-8">
        <script src="../vue.js"></script>
    </head>
    <body>
        <!--   子组件父组件传递消息   -->
        <!--
            这边实现从input添加数据到list，单击list的某一项将会删除它
        -->
        <div id="root">
            <div>
                <input v-model="inputValue"/>
                <button @click="handlerSubmit">提交</button>
            </div>
            <ul>
                <todo-item 
                    v-for="(item,index) of list" 
                    :key="index" 
                    :content="item" 
                    :index="index" 
                    @delete="handlerDelete"
                >
               </todo-item>
            </ul>
        </div>
        <script>
            //定义组件,可以把每一个组件认为是一个Vue示例，他里面也可以有methods，data属性
            Vue.component('todo-item',{
                props:['content','index'], //从父组件传递属性给子组件
                data:function () {
                    return {
                        time: new Date().toUTCString()
                    }
                },
                template:'<li @click="handlerClick">{{content}}={{time}}</li>',
                methods:{
                    handlerClick:function(){    //定义处理组件的事件
                        this.$emit('delete',this.index);   
                        //这边不能直接写index，
                        //如果不是this.index将会报错，not defined index
                    }
                }
            });
            var app1=new Vue({
                el:'#root',//绑定的是dom元素
                data:{
                    inputValue:'',
                    list:[]
                },
                methods:{
                    handlerSubmit:function(){
                        if(this.inputValue != ''){//还是有缺陷的
                            this.list.push(this.inputValue);
                            this.inputValue='';
                        }                        
                    },
                    handlerDelete:function(index){
                        this.list.splice(index,1); //删除list中指定索引的数据项
                    }
                }
            });
        </script>
    </body>
</html>